<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    listData: { type: Object, required: true },
  },
});
</script>

<template>
  <view class="rule-table">
    <view class="rule-table-head">
      <view class="rule-table-th">行程前</view>
      <view class="rule-table-th2">违约金</view>
    </view>
    <view class="rule-table-body">
      <view class="rule-table-tr" v-for="(i, d) of listData" :key="d">
        <view class="rule-table-td">{{ i.title }}</view>
        <view class="rule-table-td2">{{ i.percentage }}%</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.rule-table {
  border: 2rpx solid #cccccc;

  .rule-table-head,
  .rule-table-tr {
    display: flex;
    align-items: center;
  }

  .rule-table-head {
    background-color: #f9f9f9;
  }

  .rule-table-th,
  .rule-table-td {
    flex-grow: 1;
    min-width: 0;
    border-right: 2rpx solid #cccccc;
  }

  .rule-table-th2,
  .rule-table-td2 {
    flex-shrink: 0;
    width: 44%;
    box-sizing: border-box;
  }

  .rule-table-th,
  .rule-table-th2 {
    font-size: 26rpx;
    color: #666666;
    line-height: 64rpx;
    text-align: center;
  }

  .rule-table-tr {
    border-top: 2rpx solid #cccccc;
  }

  .rule-table-td,
  .rule-table-td2 {
    padding: 14rpx 20rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
    text-align: center;
  }
}
</style>